import type { EChartsOption } from "echarts";

export function getOption(): EChartsOption{
  const xData = ["2018", "2019", "2020", "2021", "2022", "2023",];
  const yData1 = [111, 600, 255, 344, 333, 555,];
  const yData2 = [11, 800, 455, 244, 933,155,];
  let datacoords1:any = [{
    coords: [],
  }];
  let datacoords2:any = [{
    coords: [],
  }];
  for (let i = 0; i < xData.length; i++) {
    datacoords1[0].coords.push([xData[i], yData1[i]]);
    datacoords2[0].coords.push([xData[i], yData2[i]]);
  }
  return {
    animationDuration: 3000,
    color: ["#ec5d5f", "#f2cb58", "#64a0c8"],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "rgba(0,0,0,.5)",
        },
      },
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
    },
    title:{
      subtext: "单位（万元）",
      left: '75%',// 距离左边位置
      top: '81.5%',// 距离上面位置
      subtextStyle:{ // 设置二级标题的样式
        color:"#9ca5bc"
      }
    },
    legend: {
      left:'10%',
      bottom:'8%',
      data: [{
        name: '实际使用外资金额',
        textStyle: {
          color: '#ffffff'
        }
      }, {
        name: '外商投资企业再投资金额',
        textStyle: {
          color: '#ffffff'
        }
      },
      ]
    },
    grid: {
      left: "2%", //图表距边框的距离
      right: "5%",
      top: "7%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: [{
      nameGap: 3, //坐标轴名称与轴线之间的距离。
      nameTextStyle: {
        color: "rgba(255,255,255,.8)",
        fontSize: 12,
      },
      type: "category",
      data: xData,
      boundaryGap: false, //从0开始
      axisLine: {
        //坐标轴线颜色
        lineStyle: {
          color: "#636E7C",
        },
      },
      axisLabel: {
        showMaxLabel: true,
        fontSize: 12,
        color: "rgba(255,255,255,.8)", //坐标的字体颜色
      },
      axisTick: {
        //是否显示坐标轴刻度  x和y不交叉
        show: false,
      },
    }, ],
    yAxis: [{
      name: "",
      type: "value",
      nameGap: 20,
      min: 0,
      max: function(value) {
        return Math.ceil(value.max / 5) * 5;
      },
      splitNumber: 5,
      nameTextStyle: {
        //坐标轴字体
        color: "rgba(255,255,255,.89)",
        fontSize: 12,
      },
      splitLine: {
        //网格线颜色
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.25)",
          type: "dashed",
        },
      },
      axisTick: {
        //是否显示坐标轴刻度
        show: true,
      },
      axisLine: {
        //坐标轴线颜色
        show: true,
        lineStyle: {
          color: "#636E7C",
        },
      },
      axisLabel: {
        color: "rgba(255,255,255,.8)", //坐标的字体颜色
        fontSize: 12,
      },
    },

    ],
    series: [
        {
      name: "实际使用外资金额",
      type: "line",
      smooth: 0, //可设置弧度，0-1
      lineStyle: {
        width: 2,
        type: "solid",
        shadowOffsetX: 0, // 折线的X偏移
        shadowOffsetY: 3, // 折线的Y偏移
        shadowBlur: 1, // 折线模糊
        shadowColor: "rgba(43,168,175,0.44)", //阴影色
        color: "#2ba8af", //折线颜色
      },
      showSymbol: true,
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#2f334d",
        borderWidth: 1,
        borderColor: "#2ba8af",
      },
      emphasis: {
        focus: "series",
      },
      data: yData1,
    },
      {
        polyline: true,
        name: '流动光线',
        type: "lines",
        coordinateSystem: "cartesian2d",
        effect: {
          trailLength: 0.5,
          show: true,
          period: 6,
          symbolSize: 4,
          loop: true,
        },
        lineStyle: {
          color: "#fff",
          width: 0,
          opacity: 0,
          curveness: 0,
          type: "dashed",
        },
        data: datacoords1,
      },
      {
        name: "外商投资企业再投资金额",
        type: "line",
        smooth: 0, //可设置弧度，0-1
        lineStyle: {
          width: 2,
          type: "solid",
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 3, // 折线的Y偏移
          shadowBlur: 1, // 折线模糊
          shadowColor: "#66c782", //阴影色
          color: "#66c782", //折线颜色
        },
        showSymbol: true,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: "#66c782",
          borderWidth: 1,
          borderColor: "#66c782",
        },
        emphasis: {
          focus: "series",
        },
        data: yData2,
      },
      {
        polyline: true,
        name: '流动光线',
        type: "lines",
        coordinateSystem: "cartesian2d",
        effect: {
          trailLength: 0.5,
          show: true,
          period: 6,
          symbolSize: 4,
          loop: true,
        },
        lineStyle: {
          color: "#fff",
          width: 0,
          opacity: 0,
          curveness: 0,
          type: "dashed",
        },
        data: datacoords2,
      },
    ]
  };
}
